<template>
     <div>
        <div class="line_box" style="top: 13.4375vw;">
            <div class="active_line"></div>
            <div class="active_line"></div>
        </div>
        <div class="line_box" style="top: 49.661458333333336vw;">
            <div class="active_line"></div>
            <div class="active_line"></div>
        </div>
        <div :class="item.classNamePro" v-for="(item,key) in iconTextList" :key="key+'a'" >
            <div :class="item.classNameIcon">
            </div>
            <div :class="item.classNameText">{{item.text}}</div>
        </div>

        <div class="tree_box">
            <div class="tree_content" v-for="(item,key) in treeList" :key="key+'b'">
                <div :class="item.classNameIcon"></div>
                <div class="tree_text">{{item.text}}</div>
            </div>
        </div>
        <div v-for="(item,index) in xActiveLineList" :key="index" :class="item.className"></div>
        <div v-for="(yLine,index) in yActiveLineList" :key="index+'d'" :class="yLine.className"></div>
        <div class="three_left_box"></div>
        <div class="three_right_box"></div>
        <div class="lingt_add1"></div>
        <div class="x_line0_active"></div>
        <div class="x_line1_active"></div>
        <div class="x_line2_active"></div>
        <div class="x_line3_active"></div>
        <div class="x_line4_active"></div>
        <div class="x_line5_active"></div>
        <div class="bottom_active_left"></div>
        <div class="bottom_active_right"></div>
        <div class="bottom_active_left2"></div>
        <div class="bottom_active_right2"></div>
        <div class="text_content" v-for="(item,index) in textList" :key="index + 'e'" :style="{top:item.top,left:item.left}">
            <p style="padding-bottom:0.6510416666666667vw">{{item.first}}</p>
            <p>{{item.second}}</p>
        </div>
    </div>
</template>

<script>
import '@/assets/styles/togeser.css'
import '@/assets/styles/togeser_frames.css'
export default {
    name:'Togeser',
    data(){
        return{
            iconTextList:[{classNamePro:'pro_icon_content pro1',classNameIcon:'icon icon1',classNameText:'text text1',text:'消费金融业务平台'},
            {classNamePro:'pro_icon_content pro2',classNameIcon:'icon icon2',classNameText:'text text2',text:'蜂工厂'},
            {classNamePro:'pro_icon_content pro3',classNameIcon:'icon icon3',classNameText:'text text3',text:'助贷SAAS'},
            {classNamePro:'pro_icon_content pro4',classNameIcon:'icon icon4',classNameText:'text text4',text:'融器'},
            {classNamePro:'pro_icon_content pro5',classNameIcon:'icon icon5',classNameText:'text text5',text:'厂商总对总平台'},
            {classNamePro:'pro_icon_content pro6',classNameIcon:'icon icon6',classNameText:'text text6',text:'资金路由器'},
            {classNamePro:'pro_icon_content pro7',classNameIcon:'icon icon7',classNameText:'text text7',text:'产品互联中台'},
            {classNamePro:'pro_icon_content pro8',classNameIcon:'icon icon8',classNameText:'text text8',text:'消费金融市场监管平台'}
            ],

            treeList:[{classNameIcon:'tree_icon tree1',text:'中国工商银行'},{classNameIcon:'tree_icon tree2',text:'中国银行'},{classNameIcon:'tree_icon tree3',text:'中国农业银行'},
            {classNameIcon:'tree_icon tree4',text:'兴业银行'},{classNameIcon:'tree_icon tree5',text:'中国邮政储蓄银行'}],

            xActiveLineList:[],
            yActiveLineList:[],

            textList:[{first:'分期业务外包',second:'作业运营平台',top:'18.567708333333332vw',
left:'32.890625vw'},
            {first:'运营数字化',second:'助贷分期',top:'18.567708333333332vw',
left:'52.1875vw'},
            {first:'电商SAAS',second:'车商SAAS',top:'18.567708333333332vw',
left:'68.25520833333333vw'}]
        }
    },
    created(){
        for(let i = 0 ; i < 6 ; i ++){
            this.xActiveLineList.push({className:`x_line x_line${i}`})
        }
        for(let i = 0 ; i < 6 ; i ++){
            this.yActiveLineList.push({className:`y_line y_line${i}`})
        }
    }
}
</script>

<style scoped>
.text_content{
position: absolute;
font-size: 0.78125vw;;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #FFFFFF;
}
/* @keyframes active_linght{
    0%{
        height: 1vw;
        width: 1vw;
    }
    50%{
        height: 0;
        width: 0;
        top: 24vw;
        left: 21vw;
    }
    100%{
        height: 0;
        width: 0;
        top: 24vw;
        left: 21vw;
    }
} */
/* .lingt_add1{
    position: absolute;
    top: 23.5vw;
    left: 20.5vw;
    width: 1vw;
    height: 1vw;
    background: #fff;
    border-radius: 50%;
    background:radial-gradient(circle,rgba(255, 255, 255, 1),rgba(255, 255, 255, .2),rgba(255, 255, 255, 0));
    animation-name: active_linght;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
} */
.bottom_active_left2{
    animation-name: bottom_active_left2;
      position: absolute;
     width: 0;
    height: 0;
    top: 37.5vw;
    left: 33.4vw;
    background: #fff;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.bottom_active_right2{
    position: absolute;
     width: 0;
    height: 0;
    top: 37.5vw;
    left: 33.4vw;
    animation-name: bottom_active_right2;
    background: #fff;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.bottom_active_left{
    animation-name: bottom_active_left;
      position: absolute;
     width: 0;
    height: 0;
    top: 37.5vw;
    left: 33.4vw;
    background: #fff;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.bottom_active_right{
    position: absolute;
     width: 0;
    height: 0;
    top: 37.5vw;
    left: 33.4vw;
    animation-name: bottom_active_right;
    background: #fff;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.three_left_box{
    position: absolute;
    top: 31vw;
    left: 24.5vw;
    width: 4vw;
    height: 5vw;
    border: .15vw solid #9294A3;
    border-right: .1vw solid rgba(255, 255, 255, 0);
    opacity: .5;
}
.three_right_box{
    position: absolute;
    top: 31vw;
    left: 39.5vw;
    width: 4vw;
    height: 5vw;
    border: .15vw solid #9294A3;
    border-left: .1vw solid rgba(255, 255, 255, 0);
    opacity: .5;
}
.x_line{
    position: absolute;
    background: #9294A3;
    opacity: .5;
}
.x_line0{
    width: 7vw;
    height: .1vw;
    top: 24vw;
    left: 21vw;
}

.x_line0_active{
    position: absolute;
    width: .1vw;
    height: .1vw;
    top: 24vw;
    left: 21vw;
    background: #fff;
    animation-name: active_line0;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.x_line1{
    width: 3.5vw;
    height: .1vw;
    top: 33.4vw;
    left: 21vw;
}

.x_line1_active{
    position: absolute;
    width: .1vw;
    height: .1vw;
    top: 33.4vw;
    left: 21vw;
    background: #fff;
    animation-name: active_line1;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.x_line2_active{
    position: absolute;
    width: .1vw;
    height: .1vw;
    top: 33.4vw;
    left: 24.5vw;
    background: #fff;
    animation-name: active_line2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.x_line3_active{
    position: absolute;
    width: .1vw;
    height: .1vw;
    top: 33.4vw;
    left: 24.5vw;
    background: #fff;
    animation-name: active_line3;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.x_line4_active{
    position: absolute;
    width: 0vw;
    height: .1vw;
    top: 31vw;
    left: 24.5vw;
    background: #fff;
    animation-name: active_line4;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.x_line5_active{
    position: absolute;
    width: 0vw;
    height: .1vw;
    top: 31vw;
    left: 24.5vw;
    background: #fff;
    animation-name: active_line5;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.x_line2{
    width: 8vw;
    height: .1vw;
    top: 24vw;
    left: 40vw;
}
.x_line3{
    width: 43vw;
    height: .1vw;
    top: 33.4vw;
    left: 43.4vw;
}
.x_line4{
    width: 19vw;
    height: .1vw;
    top: 41.4vw;
    left: 67.4vw;
    }

.x_line5{
    width: 16vw;
    height: .1vw;
    top: 41.4vw;
    left: 33.4vw;
    }

.y_line{
    position: absolute;
    background: #9294A3;
    opacity: .5;
}

.y_line1{
    width: .15vw;
    height: 7vw;
    top: 26.5vw;
    left: 54.5vw;

}

.y_line2{
    width: .15vw;
    height: 7vw;
    top: 26.5vw;
    left: 70.5vw;

}
 
 .y_line3{
    width: .15vw;
    height: 7vw;
    top: 26.5vw;
    left: 86.4vw;
}

 .y_line4{
    width: .15vw;
    height: 4vw;
    top: 37.5vw;
    left: 33.4vw;
}

 .y_line5{
    width: 0.15vw;
    height: 7vw;
    top: 34.5vw;
    left: 86.4vw;
}


 .line_box {
            width:90.83333333333333vw;
            height:  0.026041666666666668vw;
            background: rgba(255, 255, 255, .4);
            position: absolute;
            display: flex;
            justify-content: space-between;
            left: 4.010416666666667vw;
        }

        .active_line {
            width:2.083333333333333vw;
            height: 0.10416666666666667vw;
            background: #fff;
            /* animation-name: acitve_line;
            animation-duration: 3.5s;
            animation-iteration-count: infinite; */
        }

        .pro_icon_content {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .icon {
            margin-right:  0.5208333333333333vw;
        }


        .tree_box {
            width:13.020833333333334vw;
            height:20.833333333333336vw;
            top:22.5vw;
            left:7.005208333333333vw;
            background: url(../../assets/img/tree_box.png);
            background-size: 100% 100%;
            position: absolute;
        }

        .tree_content {
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
        }

        .tree_icon {
            margin: 0 1.2760416666666667vw 0 2.265625vw;
            width:2.1354166666666665vw;
            height:2.1354166666666665vw;
        }

        .tree_text {
            height: 1.4583333333333333vw;
            font-size: 0.78125vw;
            font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 1.4583333333333333vw;
        }

     
      
 
   


       
      
      
/*         
        .bottom_active_line{
            height: 100%;
            width: 0.10416666666666667vw;
            background: #fff;
            position: relative;
            animation-name: active_bottom;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
     */
</style>